<template>
  <div class="rightMiddle">
    <div class="title">
      <span class="word">点位在线分析</span>
    </div>
    <div class="line"></div>
    <div class="pic1">
      <div class="box1">
        <ul>
          <li>当前总数</li>
          <li>当前启用数</li>
          <li>当前在线数</li>
        </ul>
        <ul class="ul2">
          <li>{{ msg.data.spotNum.spotNum3 }}</li>
          <li>{{ msg.data.spotNum.spotNum3 }}</li>
          <li>{{ msg.data.spotNum.spotNum3 }}</li>
        </ul>
      </div>
      <div class="echarts">
        <scEcharts id="chartDom" width="800px" height="310px" :option="option">
        </scEcharts>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { outlineMsg } from "@/api/model/admins.js";
import scEcharts from "@/components/scEcharts";
const msg = reactive({ data: {} });
const Edata = reactive({ data: [] });
onMounted(() => {
  outlineMsgs();
});
const outlineMsgs = async () => {
  let { data } = await outlineMsg();
  msg.data = data.data;
  Object.keys(data.data.deviceGroup).forEach((msg) => {
    Edata.data.push({ value: data.data.deviceGroup[msg], name: msg });
  });
  console.log(Edata.data);
};
var option = {
  title: {
    subtext: "点位分布",
    left: "20%",
    top: "10%",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    // left: "5%",
    orient: "vertical",
    right: "10%",
    top: "40%",
    itemWidth: 15,
    itemHeight: 15,
  },

  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: true,
        // position: "outside",
        position: "inside",
        formatter: "{b}\n{c}",
        color: "#fff",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
        },
      },
      labelLine: {
        show: true,
      },
      color: [
        "rgb(174, 221, 255)",
        "rgb(103, 159, 196)",
        "rgb(65, 183, 204)",
        "rgb(67, 194, 243)",
        "rgb(61, 169, 241)",
        "rgb(103, 159, 196)",
        "rgb(103, 159, 196)",
      ],
      data: Edata.data,
    },
  ],
};
</script>

<style scoped lang="less">
ul {
  list-style: none;
}
.rightMiddle {
  // width: 1236px;
  // height: 334px;
  width: 100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 14px 10px;
  line-height: 20px;
  font-weight: normal;
  background-color: white;
  margin-top: 10px;
  font-style: normal;
  .title {
    padding: 20px;
    display: flex;
    // width: 1180px;
    position: relative;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  .pic1 {
    display: flex;
    flex-direction: row;
    // justify-content: space-between;
  }
  .box1 {
    width: 350px;
    display: flex;
    height: 100%;
    padding-left: 40px;
    padding-top: 55px;
    ul {
      padding: 5px;
      float: left;
      li {
        margin: 10px 5px;
        padding-bottom: 40px;
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        text-decoration: none;
      }
    }
    /deep/.el-button > span {
      color: white;
      display: inline-flex;
      align-items: center;
    }
    .ul2 {
      // padding: 10px;
      float: left;
      li {
        margin: 10px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        font-size: 22px;
        color: rgb(58, 124, 206);
        font-style: normal;
        letter-spacing: 0px;
        font-weight: 500;
        text-decoration: none;
      }
    }
  }
}
</style>
